<template>
    <div class="drawer-layout" v-loading="loading">
        <!-- Header -->
        <div class="drawer-header">详情</div>

        <!-- Body -->
        <div class="drawer-body">
            <el-form-item label="修改前">
                <div class="code-box">
                    <code>{{ formatJSON(detail?.before) }}</code>
                </div>
            </el-form-item>
            <el-form-item label="修改后">
                <div class="code-box">
                    <code>{{ formatJSON(detail?.after) }}</code>
                </div>
            </el-form-item>
        </div>
        <!-- Footer -->
        <div class="drawer-footer">
            <el-button @click="onCancel">取消</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import {onMounted, ref, watch} from "vue";
import {LoggerModel} from "@/models/settingModel.ts";
import {getLoggerDetailApi} from "@/api/modules/setting.ts";

const loading = ref(false);
const props = defineProps<{ modelValue: boolean; loggerID: number }>();
const emit = defineEmits(["update:modelValue"]);
const onCancel = () => {
    emit("update:modelValue", false);
};
const detail = ref<LoggerModel>();

const loadDetail = async () => {
    if (loading.value) return;
    loading.value = true;
    try {
        const detailData = await getLoggerDetailApi({id: props.loggerID});
        detail.value = detailData.data.data;
    } finally {
        loading.value = false;
    }
};
watch(
    () => props.loggerID,
    (newVal) => {
        if (newVal && props.modelValue) {
            loadDetail();
        }
    },
    {immediate: true}
);
const formatJSON = (obj: any) => {
    try {
        return JSON.stringify(obj, null, 2);
    } catch {
        return String(obj);
    }
};
onMounted(() => {
    loadDetail();
});
</script>

<style scoped>
.drawer-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.drawer-header {
    flex: 0 0 60px;
    padding: 16px 20px;
    font-size: 18px;
    font-weight: 600;
    border-bottom: 1px solid #ebeef5;
}

.drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px;
}

.drawer-footer {
    flex: 0 0 64px;
    padding: 12px 20px;
    border-top: 1px solid #ebeef5;
    background: #fff;
    text-align: right;
}

.drawer-footer .el-button + .el-button {
    margin-left: 12px;
}

.code-box {
    background: #1e1e1e;
    color: #dcdcdc;
    padding: 12px;
    border-radius: 6px;
    font-family: "Fira Code", "Courier New", monospace;
    font-size: 16px;

    white-space: pre-wrap; /* 保留换行 */
    word-break: break-word; /* 超长单词自动换行 */
    overflow-wrap: break-word; /* 兼容性更好 */

    max-height: 350px;
    overflow-y: auto; /* 竖向滚动 */
    overflow-x: hidden; /* 禁止横向滚动 */
    display: block; /* 保证 div 或 code 是块级元素 */
}
</style>
